<template>
    <div class="app-container">
        <el-table :data="typeList" style="width: 100%; margin-bottom: 20px" row-key="itemTypeId" border
            default-expand-all :tree-props="{ children: 'children' }">
            <el-table-column prop="itemTypeName" label="分类名称" sortable width="180">
            </el-table-column>
            <el-table-column prop="itemOrProduct" label="物料或产品" sortable width="180">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.itemOrProduct== 'ITEM' ? '' : 'danger'">
                        <span>{{ scope.row.itemOrProduct == 'ITEM' ? '物料' : '产品' }}</span></el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="enableFlag" label="启用状态" sortable width="180">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.enableFlag == 'Y' ? '' : 'danger'">
                        <span>{{ scope.row.enableFlag == 'Y' ? '是' : '否' }}</span></el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="orderNum" label="排序" sortable width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleAdd(scope.$index, scope.row)">新增</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="新增分类" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="分类编码" :label-width="formLabelWidth">
                    <el-input v-model="form.itemTypeCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="form.itemTypeName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父分类名称" :label-width="formLabelWidth">
                    <el-select v-model="form.parentTypeId" placeholder="请选择" disabled>
                        <el-option v-for="item in parentTypes" :key="item.itemTypeId" :label="item.itemTypeName"
                            :value="item.itemTypeId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="是否产品" :label-width="formLabelWidth">
                    <el-radio v-model="form.itemOrProduct" label="PRODUCT">产品</el-radio>
                    <el-radio v-model="form.itemOrProduct" label="ITEM">物料</el-radio>
                </el-form-item>
                <el-form-item label="启用状态" :label-width="formLabelWidth">
                    <el-radio v-model="form.enableFlag" label="Y">是</el-radio>
                    <el-radio v-model="form.enableFlag" label="N">否</el-radio>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addType()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 导入api/employee.js中定义接口
import { listTypeVO, typeInfo, addType, deleteType } from "@/api/type";

export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
        return {
            formLabelWidth: "100px",
            typeList: [],
            listLoading: true,
            dialogFormVisible: false,
            dialogUpdateVisible: false,
            form: {
                itemTypeCode: '',
                itemTypeName: '',
                itemOrProduct: 'PRODUCT',
                enableFlag: 1,
                parentTypeId: 0
            },
            parentTypes: []
        }
    },
    created() {
        this.fetchData();
    },
    methods: {
        // fetchData 是获取数据的方法
        fetchData() {
            this.listLoading = true;
            listTypeVO().then((response) => {
                console.log("120:", response.data);
                this.typeList = response.data;
                
                
                this.listLoading = false;
            });
        },
        handleAdd(index, row) {
            // console.log(index, row);
            // 读取分类信息，作为新增数据的父分类
            typeInfo(row.itemTypeId).then((response) => {
                console.log("line114:", response);
                this.parentTypes = [];
                this.parentTypes.push(response.data);
                this.form.parentTypeId = response.data.itemTypeId
                this.dialogFormVisible = true;
            });

        },
        // 添加分类
        addType() {
            addType(this.form).then((response) => {
                console.log("line125:", response);
                if (response.code == 2000) {
                    this.dialogFormVisible = false;
                    this.fetchData();
                }
            });
        },
        handleDelete(index, row) {
            // console.log(index, row);
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteType(row.itemTypeId).then((response) => {
                        console.log("line139:",response);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.fetchData();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        handleEdit(index, row) {
            console.log(index, row);
            // unitInfo(row.id).then((response) => {
            //     this.form = response.data;
            //     this.dialogUpdateVisible = true;
            // });
        },
    },
};
</script>
